<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
	<!-- 垂直方向属性 vertical-align
		功能：1.应用与表格中单元格【栅格布局】
			  2.行内元素与行内块元素对齐方式
				理解：文本和图片对齐方式【垂直居中】
				元素种类：行内元素：典型行内元素 span，a，文本
				特点：在一行内显示,不可设置宽高
				块级元素：典型块级元素 div，p
				特点：独占一行，可设宽高
				行内块元素:典型行内块元素 img
				特点：在一行内显示，可设宽高
				页面组成：元素直之间嵌套生成
				三种元素相互嵌套没有问题但是嵌套会根据元素特点页面造成混乱
				嵌套条件1：在一行内显示
					    块套行  √  推荐
					    行套行  √
					    行套块  √  添加条件，块添加宽高,造成页面布局混乱
						块套块  √
				嵌套条件2：独占一行【效果】
						块套行  √  推荐
						行套行  ×
						行套块  ×
						块套块  √
		-->
		<style>
			/* 抓每个img   
			派生（后代）选择器特点：抓取父元素中所有（后代）子元素【不符合元素嵌套特点】
            伪类选择器特点：在选择器后，过滤符合“特定条件”某个元素
			             nth-child：选中父元素中第n个
						 符合条件：p中包含4个
			id选择器：抓取父元素，空间大
			class选择器：抓取父元素中某个子元素，微调
			*/
			/* 标准抓取每个img方案 */
			p img.baseline{
				vertical-align: baseline;
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
				/* vertical-align与text-align区别：
				区别1：属性值不同
				区别2：vertical-align操作文本和图片垂直问题
				       text-align操作文本左右和居中以及两边对齐
				*/
			}
			p img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>沸羊羊<img class="baseline" src="img/4 (1).png" alt="沸羊羊" height="100px" width="100px"/>基线对齐</p>
		<p>懒羊羊<img class="top" src="img/4 (2).png" alt="懒羊羊" height="100px" width="100px"/>顶部对齐</p>
		<p>开心羊<img class="middle" src="img/4 (3).png" alt="开心羊" height="100px" width="100px"/>中间对齐</p>
		<p>慢羊羊<img class="bottom" src="img/4 (4).png" alt="慢羊羊" height="100px" width="100px"/>底部对齐</p>
	<!-- 需求：垂直方向属性  4个属性值
			  如果不改变现有html结构，可以找到依次4个img
			  抓每个--4个图片
		思路：派生选择器+伪类选择器
		-->
	</body>
</html>